<script setup>
import MyTable from '@/components/MyTable.vue';
import StickPopup from '@/components/StickPopup.vue';
import { ref, onMounted } from 'vue';
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
const router = useRouter();
const goToSetting = () => {
    router.push('/index/commission/setting');
}
const firstTableData = [
    {
        employee: '张三',
        totalCommission: 5000,
        contractBase: 10000,
        contractAmount: 2000,
        orderBase: 8000,
        orderAmount: 1500,
        accountServiceCount: 5,
        accountServiceTotal: 5000,
        accountServiceAmount: 1000,
        projectComplete: 3,
        projectAmount: 900,
        contractRecommendBase: 7000,
        contractRecommendAmount: 1400,
        orderRecommendBase: 6000,
        orderRecommendAmount: 1200
    },
    {
        employee: '李四',
        totalCommission: 6000,
        contractBase: 12000,
        contractAmount: 2400,
        orderBase: 9000,
        orderAmount: 1800,
        accountServiceCount: 6,
        accountServiceTotal: 6000,
        accountServiceAmount: 1200,
        projectComplete: 4,
        projectAmount: 1200,
        contractRecommendBase: 8000,
        contractRecommendAmount: 1600,
        orderRecommendBase: 7000,
        orderRecommendAmount: 1400
    },
    {
        employee: '王五',
        totalCommission: 7000,
        contractBase: 15000,
        contractAmount: 3000,
        orderBase: 10000,
        orderAmount: 2000,
        accountServiceCount: 7,
        accountServiceTotal: 7000,
        accountServiceAmount: 1400,
        projectComplete: 5,
        projectAmount: 1500,
        contractRecommendBase: 9000,
        contractRecommendAmount: 1800,
        orderRecommendBase: 8000,
        orderRecommendAmount: 1600
    }
];
const mockData = ref([]);
const loading = ref(true)
const value1 = ref('')

const activeName = ref('first')
const handleClick = (tab, event) => {
    console.log(tab, event);

    loading.value = true
    setTimeout(() => {
        if(activeName.value === 'first') {
            mockData.value = []
            loading.value = false
            return;
        }
        loading.value = false
    }, 2000)
}


const handleExport = () => {
  ElMessage({
    message: '数据导出功能已触发',
    type: 'success',
    plain: true,
  })
}
</script>

<template>
    <div class="my-clue">
        <div class="top-filter">
            <div class="top-filter-left">
                <div class="block">
                    <el-date-picker v-model="value1" type="month" placeholder="请选择月份"/>
                </div>
                <div class="top-filter-checkbox">
                    <el-checkbox v-model="checked1" label="隐藏无数据员工" size="default" border />
                </div>
            </div>
            <div class="top-filter-right">
                <el-button @click="goToSetting" type="primary">提成规则设置</el-button>
                <el-button type="primary" @click="handleExport">导出</el-button>
            </div>
        </div>
        <div class="table-area">
            <div class="table-area-tab">
            <!-- 第一个表格：包含员工/部门及各类提成明细 -->
            <el-table :data="firstTableData" style="width: 100%; margin-bottom: 20px;">
                <!-- 员工/部门列 -->
                <el-table-column prop="employee" label="员工/部门" width="150" />
                <!-- 总提成列 -->
                <el-table-column prop="totalCommission" label="总提成(元)" width="120" />
  
            <!-- 合同签单-按单提成 多级列 -->
                <el-table-column label="合同签单-按单提成">
                    <el-table-column prop="contractBase" label="提成基数(元)" width="150" />
                    <el-table-column prop="contractAmount" label="提成金额(元)" width="150" />
                </el-table-column>

            <!-- 订单签单-按单提成 多级列 -->
                <el-table-column label="订单签单-按单提成">
                    <el-table-column prop="orderBase" label="提成基数(元)" width="150" />
                    <el-table-column prop="orderAmount" label="提成金额(元)" width="150" />
                 </el-table-column>

            <!-- 会计服务提成 多级列 -->
                <el-table-column label="会计服务提成">
                    <el-table-column prop="accountServiceCount" label="服务户数" width="120" />
                    <el-table-column prop="accountServiceTotal" label="服务总金额" width="150" />
                    <el-table-column prop="accountServiceAmount" label="提成金额(元)" width="150" />
                </el-table-column>
            <!-- 项目外勤提成 多级列 -->
                <el-table-column label="项目外勤提成">
                    <el-table-column prop="projectComplete" label="完成数" width="120" />
                    <el-table-column prop="projectAmount" label="提成金额(元)" width="150" />
                </el-table-column>
            <!-- 合同推荐提成 多级列 -->
                <el-table-column label="合同推荐提成">
                    <el-table-column prop="contractRecommendBase" label="提成基数(元)" width="150" />
                    <el-table-column prop="contractRecommendAmount" label="提成金额(元)" width="150" />
                </el-table-column>
            <!-- 订单推荐提成 多级列 -->
                <el-table-column label="订单推荐提成">
                    <el-table-column prop="orderRecommendBase" label="提成基数(元)" width="150" />
                    <el-table-column prop="orderRecommendAmount" label="提成金额(元)" width="150" />
                </el-table-column>
            </el-table>
            </div>
        </div> 
    </div>
</template>
<style lang="less" scoped>
.my-clue {
    width: 100%;
    height: 100%;
    background-color: rgb(239,239,239);
    overflow: auto;
}
.top-filter {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 0 20px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 9;
}
.top-filter-left {
    height: 60px;
    display: flex;
    align-items: center;
    gap: 10px;
    .top-filter-btn {
        width: 80px;
        height: 30px;
        border-radius: 5px;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        user-select: none;
        .top-filter-btn-icon {
            width: 20px;
            height: 20px;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .top-filter-search {
        width: 200px;
    }
}
.table-area {
    width: 94%;
    margin: 20px auto;
    box-shadow: 0 0 10px 0 #ddd;
    background-color: #fff;
    padding: 10px 20px;
    box-sizing: border-box;
    .table-area-tab {
        width: 100%;
        box-sizing: border-box;
    }
    .table-area-table {
        width: 100%;
        box-sizing: border-box;
    }
}

.top-filter-form, .top-filter-operate {
    width: 400px;
    background-color: #fff;
}
</style>